<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电子时钟</title>
		<style type="text/css">
				body{
					background-color: cadetblue;
				}
				/* 设置容器样式 */
				#container{
					width: 100%;
					height: 500px;
					display: flex;
					justify-content: center;
					position: relative;
				}
				/* 设置时钟样式 */
				#NewClock{
					width: 200px;
					height: 200px;
					background-color: white;
					/* 设置为圆 */
					border-radius: 150px;
					/* 设置边框  solid 给图形加上边框*/
					border: 20px coral solid;
					/* 设置位置  相对位置*/
					position: relative;
					/* 垂直横向居中 */
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.clock{
					width: 10px;
					height: 180px;
					position: absolute;
					transform: rotate(30deg);
				}
				/* 时针样式 */
				#NewHour1{
					height: 90px;
					background-color: red;
				}
				#NewHour2{
					height: 60px;	
				}
				/* 分针样式 */
				#NewMinu1{
					height: 90px;
					background-color: blue;
				}
				#NewMinu2{
					height: 60px;	
				}
				/* 秒针样式 */
				#NewSecond1{
					height: 90px;
					background-color: green;
				}
				#NewSecond2{
					height: 60px;	
				}
				
				/* 分类 */
				.class1{
					width: 3px;
					height: 150px;
					/* 绝对位置 */
					position: absolute; 
					top: 50px;
				}
		</style>		
	</head>
	<body>
		<!-- 容器div -->
		<div id="container">
			<!-- 闹钟div -->
			<div id="NewClock">
				
				<!-- 设置时间1~12 -->
				<div id="num1" class="clock">
					<div id="num1-text">
						1
					</div>
				</div>
				
				<div id="num2" class="clock">
					<div id="num2-text">
						2
					</div>
				</div>
				
				<div id="num3" class="clock">
					<div id="num3-text">
						3
					</div>
				</div>
				
				<div id="num4" class="clock">
					<div id="num4-text">
						4
					</div>
					
				</div>
				
				<div id="num5" class="clock">
					<div id="num5-text">
						5
					</div>
				</div>
				
				<div id="num6" class="clock">
					<div id="num6-text">
						6
					</div>
				</div>
				
				<div id="num7" class="clock">
					<div id="num7-text">
						7
					</div>
				</div>
				
				<div id="num8" class="clock">
					<div id="num8-text">
						8
					</div>
				</div>
				
				<div id="num9" class="clock">
					<div id="num9-text">
						9
					</div>
				</div>
				
				<div id="num10" class="clock">
					<div id="num10-text">
						10
					</div>
				</div>
				
				<div id="num11" class="clock">
					<div id="num11-text">
						11
					</div>
				</div>
				
				<div id="num12" class="clock">
					<div id="num12-text">
						12
					</div>
				</div>
				
			</div>
			<!-- 设置时针 -->
			<div id="NewHour" class="class1">
				<!-- 分段 -->
				<div id="NewHour1">
					
				</div>
				<div id="NewHour2">
					
				</div>
			</div>
			
			<!-- 设置分针 -->
			<div id="NewMinu" class="class1">
				<!-- 分段 -->
				<div id="NewMinu1">
					
				</div>
				<div id="NewMinu2">
					
				</div>
				
			</div>
			
			<!-- 设置秒针 -->
			<div id="NewSecond" class="class1">
				<!-- 分段 -->
				<div id="NewSecond1">
					
				</div>
				<div id="NewSecond2">
					
				</div>				
			</div>
		</div>
	
	</body>
	<script type="text/javascript">
		function NewTime(){
			//获取当前时间
			var now = new Date();
			//获取时分秒
			var hour=now.getHours();
			var minu=now.getMinutes();
			var sec=now.getSeconds();
			console.log(hour,minu,sec)
			//计算角度
			var HourTran=360*(hour+minu/60+sec/3600)/12; //时
			var MinuTran=360*(minu+sec/60)/60; 
			var SecTran=360*sec/60; 
			
			//获取各自的容器id
			var HourObj=document.getElementById('NewHour');
			var MinuObj=document.getElementById('NewMinu');
			var SecObj=document.getElementById('NewSecond');
			//修改角度
			HourObj.style.transform='rotate('+HourTran+'deg)';
			MinuObj.style.transform='rotate('+MinuTran+'deg)';
			SecObj.style.transform='rotate('+SecTran+'deg)';
		}	
		function NewFUNC(){
			for(var i=1;i<=12;i++){
				var NewTran= 30*i;
				// 旋转div
				document.getElementById('num'+i).style.transform = 'rotate('+NewTran+'deg)';
				//旋转文字
				document.getElementById('num'+i+'-text').style.transform ='rotate(-'+NewTran+'deg)';			
			}
		}
		onload = function(){
			NewFUNC();
			setInterval(function(){
				NewTime();
			},1000)
		}
		
	</script>
	
</html>
